<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.name" placeholder="请选择小区" filterable
                                       clearable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.name" :key="item.name"
                                           :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</Button>
                    </FormItem>
                </Form>
            </Row>
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column label="小区名称">
                    <template slot-scope="scope">
                        {{scope.row.name}}
                        <!--{{housingNameList[scope.row.id]}}-->
                    </template>
                </el-table-column>
                <el-table-column prop="gzhAppId" label="微信公众号APPID"></el-table-column>
                <el-table-column prop="gzhAppSecret" label="微信公众号SECRET"></el-table-column>
                <el-table-column prop="wxPaySubMchId" label="子商户门店ID"></el-table-column>
                <el-table-column prop="out_shop_id" label="微信云支付门店ID"></el-table-column>
                <el-table-column prop="order_prefix" label="微信云支付订单前缀"></el-table-column>
                <el-table-column prop="fuyouMchId" label="富友商户ID"></el-table-column>
                <el-table-column label="支付方式">
                    <template slot-scope="scope">
                        <p v-if="scope.row.wxPaymentMethod == 1" style="color:green">微信支付</p>
                        <p v-if="scope.row.wxPaymentMethod == 2" style="color:blue">微信云支付</p>
                        <p v-if="scope.row.wxPaymentMethod == 3" style="color:red">富友支付</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="HandleEdit( scope.row )">配置</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>


        <Modal v-model="modalEdit" title="修改" width="800">
            <Form ref="saveHousing" :model="Housing" :rules="HousingRules" :label-width="110">
                <FormItem label="小区名称" prop="name">
                    <Input v-model="Housing.name" disabled placeholder="小区名称" class="normal-input"></Input>
                </FormItem>

                <FormItem label="微信支付方式" prop="wxPaymentMethod">
                    <el-select v-model="payMethod" @change="payChange" placeholder="请选择微信支付方式">
                        <el-option v-for="item in options" :value="item.value" :key="item.value" :label="item.label"></el-option>
                    </el-select>
                </FormItem>
                <!--<FormItem label="微信公众号APPID" prop="gzhAppId">
                    <Input v-model="Housing.gzhAppId" clearable placeholder="微信公众号APPID" class="normal-input"></Input>
                </FormItem>

                <FormItem label="微信公众号SECRET" prop="gzhAppSecret">
                    <Input v-model="Housing.gzhAppSecret" clearable placeholder="微信公众号SECRET" class="normal-input"></Input>
                </FormItem>-->
                <FormItem label="子商户门店ID" prop="wxPaySubMchId" v-if="payMethod==1">
                    <Input v-model="Housing.wxPaySubMchId" clearable placeholder="子商户门店ID" class="normal-input"></Input>
                </FormItem>

                <FormItem label="微信云门店ID" prop="out_shop_id" v-if="payMethod==2">
                    <Input v-model="Housing.out_shop_id" clearable placeholder="微信云门店ID" class="normal-input"></Input>
                </FormItem>

                <FormItem label="微信云订单前缀" prop="order_prefix" v-if="payMethod==2">
                    <Input v-model="Housing.order_prefix" clearable placeholder="微信云订单前缀" class="normal-input"></Input>
                </FormItem>
                <FormItem label="富友商户ID" prop="fuyouMchId" v-if="payMethod==3">
                    <Input v-model="Housing.fuyouMchId" clearable placeholder="富友商户ID" class="normal-input"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel()">关闭</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="tableLoading">确定</Button>
            </div>
        </Modal>

    </div>
</template>


<script>
    export default {
        data() {
            return {
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                tableData: [],
                houseList: [],
                //表单提交状态
                modal: {},
                tableLoading: false,
                modalEdit: false,
                Housing: {},
                HousingRules: {
                    name: [
                        {required: true, message: "请选择小区"}
                    ],
                },
                options:[{
                    value:1,
                    label:"微信支付",
                },{
                    value:2,
                    label:"微信云支付",
                },{
                    value:3,
                    label:"富友支付",
                }],
                payMethod:"",
            }
        },
        created: function () {
            this.gethouse();
            this.loadData();
        },
        methods: {
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/housing/loadData", params).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },

            //加载小区
            gethouse() {
                let url = "/api/housing/getHousingByLogin";
                this.postRequest(url).then(res => {
                    this.houseList = res;
                });
            },
            //查询
            handleQuery(name) {
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            onCancel: function () {
                this.modalEdit = false;
            },
            //    编辑按钮
            HandleEdit: function (row) {
                this.modalEdit = true
                this.Housing = row;
                this.payMethod=this.Housing.wxPaymentMethod;
            },
            //确认按钮
            handleSubmit: function () {
                this.$refs['saveHousing'].validate(valid => {
                    if (valid) {
                        const url = "/api/housing/saveConfigKey";
                        this.Housing.wxPaymentMethod=this.payMethod;
                        this.postRequest(url, this.Housing).then(res => {
                            this.tableLoading = false
                            if (res.code == 20000) {
                                this.$Message.success("操作成功！")
                                this.modalEdit = false
                                this.loadData()
                                return
                            }
                            this.$Message.error(res.message)
                        })
                    }
                })
            },
            payChange(value){

            }
        }
    };
</script>

